<template>
  <transition name="slideTopDown">
    <div v-if="isToastShow" :class="toastClass">
      <!--<img :src="url" class="toast-g-icon">-->
      <span>{{message}}</span></div>
  </transition>
</template>

<script>
/* eslint-disable*/
export default {
  name: 'toast',
  data () {
    return {
      iconUrl: {
        // successUrl: require('../../assets/success.png'),
        // infoUrl: require('../../assets/info.png'),
        // dangerUrl: require('../../assets/danger.png'),
        // warningUrl: require('../../assets/warn.png')
      },
      isToastShow: false
    }
  },
  computed: {
    toastClass () {
      var preTypeClass = 'toast-g-'
      return ['toast-g', preTypeClass + this.type]
    },
    url () {
      return this.iconUrl[this.type + 'Url']
    }
  },
  created () {
    // 在vue渲染完成以后
    this.$nextTick(() => {
      this.isToastShow = true
      setTimeout(function () {
        this.isToastShow = false
      }.bind(this), 1500)
    })
  }
}
</script>

<style scoped>
  .toast-g{
    width: 80%;
    max-width: 300px;
    border-radius: 3px;
    line-height: 40px;
    text-align: center;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    margin: auto;
  }
  .toast-g-success{
    background: rgb(213, 233, 205);
    border: 1px #f5f5f5 solid;
    color: #86c278;
  }
  .toast-g-warning{
    background: rgb(248, 232, 201);
    border: 1px #f5d03d solid;
    color: #f0d360;
  }
  .toast-g-info{
    background: #e5dcd9;
    border: 1px #f5f5f5 solid;
    color: #bbc1c2;
  }
  .toast-g-danger{
    background: #f5a399;
    border: 1px rgba(245, 58, 42, 0.54) solid;
    color: #c22920;
  }
  .toast-g-icon{
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 5px ;
  }
  .slideTopDown-enter{
    top: -40px;
    opacity: 0;
  }
  .slideTopDown-enter-active{
    transition: all .2s ease-in-out;
  }
  .slideTopDown-enter-to{
    top: 50px;
    opacity: 1;
  }
  .slideTopDown-leave{
    top: 50px;
    opacity: 1;
  }
  .slideTopDown-leave-active{
    transition: all .2s ease-in-out;
  }
  .slideTopDown-leave-to{
    top: -40px;
    opacity: 0;
  }
</style>
